﻿

//处理接口返回图表数据格式
function mapData(list,days){
    var dateList = getDates(days);
    var values = [];
    for(var k = 0; k < dateList.length; k++){
        values.push({newdates:(dateList[k].year +  "-" + dateList[k].newdates),year:dateList[k].year});
    }
    for(var j = 0; j < values.length; j++){
        for(var i = 0; i < list.length; i++){
            list[i].showDate = list[i].Date.substr(5,5);
            list[i].year = list[i].Date.substr(0,4);
            if(values[j].newdates == (list[i].year + "-" + list[i].showDate)){
                values[j].Total = list[i].Total;
            }
        }
    }
    return values;
}

//获取当前时间多少天后的日期和对应星期
function getDates(days,todate=getCurrentToday()) {//todate默认参数是当前日期
    var dateArry = [];
    for (var i = days-1; i >=0; i--) {
        var dateObj = dateLater(todate, -i);
        dateArry.push(dateObj)
    }
    return dateArry;
}


    //当前时间获取
    function getCurrentToday() {
        const date = new Date()
        var year = date.getFullYear();
        var mouths = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
        var day = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
        var currentdate = year + "-" + mouths + "-" + day;
        return currentdate
    }

    /**
     * 传入时间后几天
     * param：传入时间：dates:"2018-04-02",later:往后多少天
     */
    function dateLater(dates,later) {
        let dateObj = {};
        let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
        let date = new Date(dates);
        date.setDate(date.getDate() + later);
        let day = date.getDay();
        dateObj.dates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "月" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate()) + "日";
        dateObj.newdates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
        dateObj.year = date.getFullYear();
        dateObj.month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
        dateObj.day = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
        dateObj.week = show_day[day];
        return dateObj;
    }

    function loadChart1(){
        var option1 = {
            title: {
                text: ''
            },
            xAxis: {
                type: 'category',
                axisTick: { show: false },//是否显示刻度线
                data: clientDateList.map(function (item) {
                    return item.date;
                }),
                axisLabel: {
                    formatter: function (value, idx) {
                        var date = new Date(value);
                        return [date.getMonth() + 1, date.getDate()].join('-');
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                boundaryGap: ['20%', '20%'] //两边留白
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: { show: false },
                axisTick: { show: false },//是否显示刻度线
                min: 0,
                max: 100,
                axisLabel: {
                    texts: [10, 40, 60, 80, 100]
                }
            },
            color: {
                type: 'linear',
                colorStops: [{ offset: 1, color: '#FE7B00' }], // 100% 处的颜色
                globalCoord: false, // 缺省为 false
            },
            series: [{
                name: '',
                type: 'line',
                smooth: true, //是否显示小圆点
                symbol: 'circle',//实体圆点
                symbolSize: 10, //圆点大小
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color: "#151D32" //标点文字颜色
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FA8429', //小圆点颜色
                        borderWidth: "2", //边框
                        borderColor: "#fff",
                        lineStyle: {
                            color: '#FD892D'
                        }
                    }
                },
                data: clientTotalList,
            }]
        };

        var myChart1 = echarts.init(document.getElementById('main1'));
        myChart1.setOption(option1);   
        myChart1.setOption({
            xAxis: { data: clientDateList },
            series: [{ data: clientTotalList }]
        })
    }

    function loadChart2(){
        
        var option2 = {
            title: {
                text: ''
            },
            xAxis: {
                type: 'category',
                axisTick: { show: false },//是否显示刻度线
                data: getImByDate.map(function (item) {
                    return item.date;
                }),
                axisLabel: {
                    formatter: function (value, idx) {
                        var date = new Date(value);
                        return [date.getMonth() + 1, date.getDate()].join('-');
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                boundaryGap: ['20%', '20%'] //两边留白
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: { show: false },
                axisTick: { show: false },//是否显示刻度线
                min: 0,
                max: 100,
                axisLabel: {
                    texts: [10, 40, 60, 80, 100]
                }
            },
            color: {
                type: 'linear',
                colorStops: [{ offset: 1, color: '#FE7B00' }], // 100% 处的颜色
                globalCoord: false, // 缺省为 false
            },
            series: [{
                name: '',
                type: 'line',
                smooth: true, //是否显示小圆点
                symbol: 'circle',//实体圆点
                symbolSize: 10, //圆点大小
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color: "#151D32" //标点文字颜色
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FA8429', //小圆点颜色
                        borderWidth: "2", //边框
                        borderColor: "#fff",
                        lineStyle: {
                            color: '#FD892D'
                        }
                    }
                },
                data: getImByvalue,
            }]
        };

        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption(option2);
        myChart2.setOption({
            xAxis: {data : getImByDate},
            series: [{data: getImByvalue}]
        })
    }

    function loadChart3(){
        
        var option3 = {
            title: {
                text: ''
            },
            xAxis: {
                type: 'category',
                axisTick: { show: false },//是否显示刻度线
                data: followByDate.map(function (item) {
                    return item.date;
                }),
                axisLabel: {
                    formatter: function (value, idx) {
                        var date = new Date(value);
                        return [date.getMonth() + 1, date.getDate()].join('-');
                    }
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                boundaryGap: ['20%', '20%'] //两边留白
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: { show: false },
                axisTick: { show: false },//是否显示刻度线
                min: 0,
                max: 100,
                axisLabel: {
                    texts: [10, 40, 60, 80, 100]
                }
            },
            color: {
                type: 'linear',
                colorStops: [{ offset: 1, color: '#FE7B00' }], // 100% 处的颜色
                globalCoord: false, // 缺省为 false
            },
            series: [{
                name: '',
                type: 'line',
                smooth: true, //是否显示小圆点
                symbol: 'circle',//实体圆点
                symbolSize: 10, //圆点大小
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color: "#151D32" //标点文字颜色
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FA8429', //小圆点颜色
                        borderWidth: "2", //边框
                        borderColor: "#fff",
                        lineStyle: {
                            color: '#FD892D'
                        }
                    }
                },
                data: followByvalue,
            }]
        };
        var myChart3 = echarts.init(document.getElementById('main3'));
        myChart3.setOption(option3);
        myChart3.setOption({
            xAxis: {data : followByDate},
            series: [{data: followByvalue}]
        })
    }

    function loadChart4(){
        
        var option4 = {
            dataset: {
                source: [
                    ['score', 'amount', 'product']//颜色 x值 y值
                ]
            },
            grid: { containLabel: true },
            xAxis: {
                splitLine: { show: false },
                axisTick: { show: false },//是否显示刻度线
                name: ''
            },
            yAxis: {
                type: 'category',
                splitLine: { show: false },
                axisTick: { show: false },//是否显示刻度线
            },
            visualMap: {
                show: false,
                orient: 'horizontal',
                left: 'center',
                min: 10,
                max: 100,
                text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#B2B2B2', '#FDC844', '#FEAB2B']
                }
            },
            series: [
                {
                    type: 'bar',
                    barWidth: 20,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            color: "#151D32" //标点文字颜色
                        }
                    },
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };

        var myChart4 = echarts.init(document.getElementById('main4'));
        myChart4.setOption(option4);
        myChart4.setOption({
            dataset: {source: sourceValue}
        });
    }